<script>
import uniPopup from "@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue"
import worriedFace from "./worriedFace.png"
import request from "@/utils/request"
import { handleUrlParams } from "@/utils"
export default {
  name: "enterToStudyRoom",
  components: {
    uniPopup,
  },
  data() {
    return {
      worriedFace,
      message: "",
    }
  },
  methods: {
    openErrorPopup(message) {
      this.message = message || "抱歉，该自习室尚未开启~"
      this.$refs.popup.open()
    },
		enterToStudyRoom(studyRoomId) {
			request({
				url: "studyRoom/allowEntryJoinStudy",
				data: {
					studyRoomId: studyRoomId,
				},
				showLoading: true,
			})
				.then((res) => {
					//不允许加入自习室弹窗警告
					if (res.statusCode === "Forbidden") {
						this.openErrorPopup(res.statusMsg)
						//首次进入自习室，进入计划制定界面
					} else if (res.statusCode === "AllowedToSetting") {
						uni.navigateTo({
							url: handleUrlParams("/studyRoom/pages/makePlan/index", {
								details: res.resultData ? JSON.stringify(res.resultData) : "",
								studyRoomId: studyRoomId,
							}),
						})
						//进入自习室详情界面
					} else if (res.statusCode === "AllowedToStudy") {
						uni.navigateTo({
							url: handleUrlParams("/studyRoom/pages/learning/index", {
								details: JSON.stringify(res.resultData),
							}),
						})
					} else {
						this.openErrorPopup()
					}
				})
				.catch((err) => {
					this.openErrorPopup(err)
				})
		}
  },
}
</script>

<template>
  <uni-popup ref="popup" type="center">
    <view class="popup-content">
      <view class="icon-container">
        <image class="icon" :src="worriedFace"></image>
      </view>
      <view class="text-container">
        <view class="text">{{ message }}</view>
      </view>
      <view class="btn" @click="() => $refs.popup.close()">确定</view>
    </view>
  </uni-popup>
</template>

<style scoped lang="scss">
.popup-content {
  background: var(--background-color);
  border-radius: 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60rpx 0;
  width: 90vw;
  .icon-container {
    .icon {
      width: 106rpx;
      height: 106rpx;
    }
  }
  .text-container {
    margin-top: 40rpx;
    .text {
      color: #101010;
      font-size: 36rpx;
      text-align: center;
      line-height: 2;
    }
  }
  .btn {
    margin-top: 40rpx;
    background: #fbca42;
    color: #a75b07;
    font-size: 32rpx;
    border-radius: 4px;
    padding: 20rpx 80rpx;
  }
}
</style>
